<template>
	<view class="main">
		<tou_hand1 handtitle='消费统计'></tou_hand1>
		<view class="show">

			<!-- <van-tabs :active="active" @click="gbtn"> -->
				<!-- <van-tab title="已审核" name="a" > -->
					<view class="sone">
						<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="pickerMy">
							<view class="uni-input">{{date}}</view>
						</picker> -->
						<van-button type="primary" @click="showPopup" class='pickerMy'>{{currentDate}}</van-button>
						    <van-popup :show="show" position="bottom" :style="{ height: '30%','z-index': 9999 }">
								<van-datetime-picker
								      :show="show"
								      type="year-month"
								      :min-date="minDate"
								      :max-date="maxDate"
								      :current-date="currentDate"
								      @confirm="onConfirm"
								      @cancel="onCancel"
								    />
						    </van-popup>
						<input v-model="projectName" placeholder='输入小区名搜索' disabled="true"/>
						
					</view>
					<view class="stwo">
						<view :style="{'padding-left':'30rpx' }">
							消费金额：{{chartss}}
						</view>
						<van-cell v-for="(item, index) in showlist" :key="index">
							<view class="stwofirst">
								<view class="sfleft">
									<view class="sfshang">
										<view class='sfson1'>消费金额：{{item.consumerFee}}</view>
										<view class='sfson'>日期:{{item.dateStr}}</view>
									</view>
									<!-- <view class="sfxia">
										地址：{{item.address}}
									</view> -->
									<!-- <view class="sfxia">
										近7日使用率：{{item.equi.usages}}
									</view> -->
									<!-- <view class="stwoleftx">
										<span :class="item.equi.free>0?'kfour':''">空闲(个):{{item.equi.free}}</span><span
											:class="item.equi.busy>0?'ktwo':'kthree'">
											占用(个):{{item.equi.busy}}</span> <span
											:class="item.equi.faults>0?'kone':'kthree'">故障(个):{{item.equi.faults}}</span>
										<span
											:class="item.equi.disconnects>0?'kone':'kthree'">离线(台):{{item.equi.disconnects}}</span>
									</view> -->
								</view>
								<!-- <view class="sfright">
									<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
								</view> -->
							</view>
						</van-cell>

					</view>
				<!-- </van-tab> -->
				
			<!-- </van-tabs> -->
			

		</view>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'

	export default {
		components: {
			tou_hand1
		},
		mounted() {
			 const now = new Date().getTime();
			this.currentDate = new Date(now).getFullYear()+"-"+
			((new Date(now).getMonth() + 1)<10?'0'+(new Date(now).getMonth() + 1):(new Date(now).getMonth() + 1))
// this.currentDate = new Date(now.getFullYear(), now.getMonth(), 1);
console.log(this.currentDate,"this.currentDate")
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }},
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				date: currentDate,
				show:false,
				currentDate: currentDate, // 当前选中的日期
				      minDate: new Date(2020, 0, 1).getTime(), // 可选的最小日期
				      maxDate: new Date(2025, 11, 31).getTime(), // 可选的最大日期
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				showlist: [], //列表数据
				name: "", //小区名
				active: 'a',
				status: '1', //审核状态；0：未审核 1：已审核
				stype: '', //运营商权限
				typeone: '', //0不刷新，1刷新
				projectName:'',
				projectId:'',
				monthlyStat:0,
				chartss:0
			}
		},
		onLoad(options) {
this.projectId=options.projectId
this.loadMore();
// this.projectName=options.projectName
		},

		onShow() {

			this.stype = uni.getStorageSync('user').type
			this.typeone = uni.getStorageSync('typeone')

			
			console.log(this.typeone);
			this.loadMore();
		},
		methods: {
			showPicker() {
			      this.show = true;
			    },
			    onConfirm(event) {
					console.log(21)
			      this.currentDate = new Date(event.detail).getFullYear()+"-"+
				  ((new Date(event.detail).getMonth() + 1)<10?'0'+(new Date(event.detail).getMonth() + 1):(new Date(event.detail).getMonth() + 1));
				  this.date=event.detail
				  this.loadMore()
			      this.show = false;
			    },
			    onCancel() {
			      this.show = false;
			    },
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
			showPopup() {
			      this.show = true;
			    },
				// onConfirm(value) {
				//       console.log('选中的日期是:', value);
				//     },
				//     onCancel() {
				//       console.log('取消选择');
				//     },
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.loadMore()
			},
			// 获取用户管理的小区列表
			loadMore() {
				const that = this;
				let data = {
					projectId: that.projectId,
					yearMonth: that.currentDate,
				}
				that.loading = true;
				that.showlist=[]
				that.$base.request('project/managerStat/statConsume', 'GET', data)
					.then(res => {
						that.loading = false;
						
						that.projectName=res.data.data.projectName
						that.chartss=res.data.data.monthlyStat
						if (res.data.data.list && res.data.data.list.length > 0) {
							that.showlist = res.data.data.list;
						} else {
							that.finished = true;
						}
					})
					.catch(err => {

					})
			},
			
			//跳转添加小区页面
			addbtn() {
				uni.navigateTo({
					url: '/manager_pages/add_cell/add_cell',
				});

			},
			// //跳转小区详情
			// detailbtn(){
			// 	 uni.navigateTo({
			// 	        url: '/pages/community_details/community_details',
			// 	 });

			// }
			//跳转小区详情
			detailbtn(projectId) {
				uni.navigateTo({
					url: '/manager_pages/charging_area_new/charging_area_new?projectId=' + projectId,
				});

			},
			//查询
			sbtn() {
				this.pageNum = 1;
				this.showlist = [];
				this.onRefresh();
			},

			gbtn(vul) {
				console.log(vul.detail.name)
				vul = vul.detail.name
				if (vul == 'a') {
					uni.setStorageSync('typeone', 0)
					this.status = '1'
					this.showlist = [];
					this.onRefresh()
				} else if (vul == 'b') {
					uni.setStorageSync('typeone', 1)
					this.status = '0'
					if (this.stype == 2) {
						this.showlist = [];
						this.onRefresh()
					} else {
						this.showlist = [];
					}

				}

			},
			
			onRefresh() {
				// 清空列表数据
				this.finished = false;
				//this.pageNum = 1
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.loadMore();
			},

			onReachBottom() {
				if (!this.loading) {
					this.isLoadingMore = true; // 开始加载状态

					setTimeout(() => {
						this.onRefresh(); // 再次请求数据
					}, 500); // 模拟异步操作需要等待一段时间才能返回数据
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;

		// overflow-x: hidden;
		/deep/.van-list__finished-text {
			margin-top: 50upx;
			padding-bottom: 100upx;
		}

		/deep/.van-hairline--top-bottom::after {
			border-width: 0;
		}

		.show {
			width: 100%;
			padding-bottom: 80upx;
			// box-sizing: border-box;

			.sone {
				width: 650upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin: 32upx auto;

				input {
					width: 562upx;
					height: 64upx;
					border: 1upx solid #b0b0b0;
					padding-left: 20upx;
				}

				.sonefoot {
					width: 101upx;
					height: 68.5upx;
					background-color: #4B98ED;
					text-align: center;
					box-sizing: border-box;
					padding-top: 13upx;

					image {
						width: 39upx;
						height: 40upx;
					}
				}
			}

			/deep/.van-tab {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #999999;
			}

			/deep/.van-tab--active {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #4b98ed;
			}

			/deep/.van-tabs__line {
				width: 91upx !important;
				height: 4upx;
				border-radius: 2px;
				background-color: #4B98ED;
			}

			.stwo {
				width: 100%;
				box-sizing: border-box;

				.stwofirst {
					width: 686upx;
					height: 150upx;
					border-radius: 16upx;
					box-shadow: 0upx 4upx 9upx 0upx rgba(44, 44, 44, 0.21);
					margin: 15upx auto;
					// margin-bottom: 15upx;
					display: flex;
					justify-content: space-between;
					padding: 29upx 24upx;
					box-sizing: border-box;
					align-items: center;

					.sfleft {
						width: 700upx;

						.sfshang {
							font-size: 28upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #0b0b0b;
							margin-bottom: 10upx;
							// display: flex;

							.sfson1 {
								width: 400upx;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
								display: block;
							}

							.sfson {
								font-size: 24upx;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 500;
								color: #666666;
								width: 220upx;
								// text-align: right;
							}
						}

						.sfxia {
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.stwoleftx {
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;

							.kone {
								margin-left: 20upx;
								color: red;
							}

							.ktwo {
								margin-left: 20upx;
								color: #BC12ED;
							}

							.kthree {
								margin-left: 20upx;
								color: #666666;
							}

							.kfour {
								color: #39b55a;
							}
						}
					}

					.sfright {

						// font-size: 28upx;
						// font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						// font-weight: 700;
						// color: #4b98ed;
						image {
							width: 13upx;
							height: 22upx;
						}
					}
				}

				.van-cell:not(:last-child)::after {
					border-bottom: 0px;
				}

				.van-cell {
					padding: 10upx 0;
				}

				.van-list {
					margin: 8upx auto;
				}
			}

			.sthree {
				width: 686upx;
				height: 88upx;
				border-radius: 16upx;
				box-shadow: 0upx 4upx 9upx 0upx rgba(19, 103, 197, 0.6);
				margin: 0 auto;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				line-height: 88upx;
				background-color: #4b98ed;
				color: #ffffff;

				// margin-bottom: 150upx;
			}
		}

	}
	/deep/.pickerMy{
		width: 300upx;
	}
</style>